<template>
  <div id="info" >
    <el-descriptions class="margin-top" title="个人信息" direction="vertical" :column="3"  border v-loading="loading"
                     element-loading-text="拼命加载中">
      <template slot="extra">
        <el-button @click="addFormVisible=true" style="margin-left: 10px" type="primary" size="small">编辑</el-button>
        <el-dialog title="编辑个人信息" center :visible.sync="addFormVisible" width="40%" :close-on-click-modal="false"
                   @closed="close()" :lock-scroll="false">
          <el-form :model="infoForm" ref="infoForm" :rules="rules">
            <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
              <el-radio v-model="infoForm.sex" label="男"></el-radio>
              <el-radio v-model="infoForm.sex" label="女"></el-radio>
            </el-form-item>
            <el-form-item label="出生日期" :label-width="formLabelWidth" prop="birthday">
              <el-date-picker
                  v-model="infoForm.birthday"
                  type="date"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="手机号" :label-width="formLabelWidth" prop="tel">
              <el-input v-model="infoForm.tel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱" :label-width="formLabelWidth" prop="email">
              <el-input v-model="infoForm.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系地址" :label-width="formLabelWidth" prop="address">
              <el-input v-model="infoForm.address" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="addInfoForm" style="width:20%">提 交</el-button>
          </div>
        </el-dialog>
      </template>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user-solid"></i>
          账号名
        </template>
        {{ admin.adminName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          真实姓名
        </template>
        {{ admin.realName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-s-custom"></i>
          性别
        </template>
        {{ admin.sex }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-date"></i>
          出生日期
        </template>
        {{ admin.birthday }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号
        </template>
        {{ admin.tel }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-message"></i>
          电子邮箱
        </template>
        {{ admin.email }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          联系地址
        </template>
        {{ admin.address }}
      </el-descriptions-item>
    </el-descriptions>
  </div>


</template>

<script>
import {getPersonInfo, updatePersonInfo} from "../../network/admin";

export default {
  name: "PersonInfo",
  data() {
    return {
      admin: {},
      loading:true,
      addFormVisible: false,
      infoForm: {
        adminName: '',
        sex: '',
        birthday: '',
        tel: '',
        email: '',
        address: ''
      },
      rules: {
        tel: [{required: true, message: '请输入手机号', trigger: 'blur'}, {
          pattern: /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/,
          message: '请输入正确的手机号',
          trigger: 'blur'
        }],
        email:[{pattern:/^([a-zA-Z0-9]+[-_\\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,message:'请输入正确邮箱格式',trigger:'blur'}]
      },
      formLabelWidth: '100px'
    }
  },
  created() {
    this.personInfo()
  },
  methods: {
    personInfo() {
      getPersonInfo(localStorage.getItem("admin_adminName")).then(res => {
        this.loading=false;
        this.admin = res.data.data;
        this.infoForm.adminName = this.admin.adminName;
        this.infoForm.sex = this.admin.sex;
        this.infoForm.birthday = this.admin.birthday;
        this.infoForm.tel = this.admin.tel;
        this.infoForm.email = this.admin.email;
        this.infoForm.address = this.admin.address;
      })
    },
    addInfoForm() {
      this.$refs.infoForm.validate((valid) => {
        if (valid) {
          updatePersonInfo(this.infoForm).then(res => {
            this.$message.success(res.data.data);
            this.personInfo();
          }).catch();

          this.addFormVisible = false;
        }
      })
    },
    close(){
      this.personInfo();
    }
  }
}
</script>

<style scoped>
#info {
  width: 70%;
  margin: 90px auto 0;
}
</style>